import { Button, Col, Drawer, Modal, Row } from "antd";
import FormRender, { useForm, Error } from "form-render";
import React, { useState } from "react";

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true,
    },
    select1: {
      title: '单选',
      type: 'string',
      enum: ['a', 'b', 'c'],
      enumNames: ['早', '中', '晚'],
    },
  },
};

const Test: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };

  const form = useForm();
  const onFinish = (formData: any, errors: Error[]) => {
    console.log('formData:', formData, 'errors', errors);
  };

  return (
    <Row gutter={24}>
      <Col span={8}>
        <h1>模态对话框</h1>
        <Button type="primary" onClick={showModal}>
          打开对话框
        </Button>
        <Modal title="Basic Modal" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </Col>
      <Col span={8}>
        <h1>抽屉组件</h1>
        <Button type="primary" onClick={showDrawer}>
          打开抽屉
        </Button>
        <Drawer title="Basic Drawer" placement="right" onClose={onClose} visible={open}>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Drawer>
      </Col>
      <Col span={8}>
        <h1>JSON 表单</h1>
        <FormRender form={form} schema={schema} onFinish={onFinish} />
        <Button type="primary" onClick={form.submit}>
          提交
        </Button>
      </Col>
    </Row>
  );
};

export default Test;
